<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="js/vue.js"></script>

	</head>

	<body>
		<div id="app">
			通过v-bind，绑定一个值给子组件 不要使用大写字母，有问题； 通过v-on传递方法，必须为方法名，不能加（）；
			<child :fmsg="msg" @func="change"></child>
			<input type="text" v-model="msg" />
			<button @click="change"> 修改msg的值</button>

		</div>

		<template id="child">
			<div>
				<h1>父组件msg：{{fmsg}}-----{{ title }}</h1>
				<button @click="myclick"> 触发父组件的方法change</button>
			</div>
		</template>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "sdfsdfsdf"
				},
				methods: {
					change() {
						this.msg = "修改后的值"
					}
				},
				components: {
					child: {
						template: "#child",
						data() {
							//子组件私有数据
							return {
								title: "子组件私有数据"
							}
						},
						//父组件通过v-bind传过来的数据
						//只读；无法修改；只能父组件修改。
						props: ['fmsg'],
						methods: {
							myclick() {
								//调用传递的父组件方法；
								//方法名为@后面的名称；可修改为任意，但是必须匹配
								this.$emit("func")
							}
						}
					}
				}

			});
		</script>
	</body>

</html>